<!--
 * @Descripttion: 
 * @version: 
 * @Author: 宁乃楚
 * @Date: 2021-07-05 09:59:23
 * @LastEditors: 宁乃楚
 * @LastEditTime: 2021-07-07 18:43:13
-->
<template>
  <div class="Complete">
      <van-sticky :offset-top="0">
        <van-nav-bar
          title="信息更改"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    <div class="form">
      <van-form>
        <van-field
          v-model="form.realname"
          name="真实姓名"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[{ required: true, message: '请填写真实姓名' }]"
        />
        <van-field
          v-model="form.telephone"
          name="电话号码"
          label="电话号码"
          placeholder="电话号码"
          :rules="[{ required: true, message: '请填写电话号码' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！'}]"
        />
        <van-field
          v-model="form.gender"
          name="性别"
          label="性别"
          placeholder="性别"
          :rules="[{ required: true, message: '请填写性别' }]"
        />
        <van-field
          v-model="form.idCard"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ required: true, message: '请填写身份证号' },{validator, message: '身份证号码格式错误！'}]"
        />
        <van-field
          v-model="form.birth"
          name="出生日期"
          label="出生日期"
          placeholder="出生日期"
          :rules="[{ required: true, message: '请填写出生日期' }]"
        />
        <div class="btn">
          <van-button round block type="info" @click="subInfo">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";

import { post } from "../../http/axios";
export default {
  data() {
    return {
      form: {},
    };
  },
  methods: {
    // 引入user vuex中的方法
    ...mapActions("user", ["getUserInfo"]),
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    // 提交用户信息
    async subInfo() {
      this.userInfo.realname = this.form.realname;
      this.userInfo.telephone = this.form.telephone;
      this.userInfo.gender = this.form.gender;
      this.userInfo.idCard = this.form.idCard;
      this.userInfo.birth = this.form.birth;
      let data = {
        id: this.userInfo.id,
        username: this.userInfo.username,
        password: this.userInfo.password,
        telephone: this.userInfo.telephone,
        realname: this.userInfo.realname,
        gender: this.userInfo.gender,
        birth: this.userInfo.birth,
        email: this.userInfo.email,
        status: this.userInfo.status,
        userFace: this.userInfo.userFace,
        registerTime: this.userInfo.registerTime,
        nation: this.userInfo.nation,
        idCard: this.userInfo.idCard,
        idcardPhotoPositive: this.userInfo.idcardPhotoPositive,
        idcardPhotoNegative: this.userInfo.idcardPhotoNegative,
        bankCard: this.userInfo.bankCard,
        bankCardPhoto: this.userInfo.bankCardPhoto,
        balance: this.userInfo.balance,
        certificationStatus: this.userInfo.certificationStatus,
        certificationTime: this.userInfo.certificationTime,
      };
      let res = await post("/baseUser/saveOrUpdate", data);
      //给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$notify({
          message: res.data.message,
          background: "pink",
          duration: 1000,
        });
        this.getUserInfo()
        this.$router.push("/manager/info");
      } else {
        this.$notify.error(res);
      }
    },
    // 身份证格式验证
     validator (val) {
      const card15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/
      const card18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      return card15.test(val) || card18.test(val)
    },
  },
  computed: {
    // 引入user vuex中的方法
    ...mapState("user", ["userInfo"]),
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style scoped>
.Complete /deep/ .van-nav-bar__title {
  color: white !important;
  font-size: 16px;
}
.Complete /deep/ .van-nav-bar {
  background-color: #fa5882;
  margin: 0;
  font-size: 16px;
}
.Complete /deep/ .van-nav-bar__text {
  color: white !important;
  font-size: 16px;
}
.Complete /deep/ .van-icon {
  color: white !important;
  font-size: 16px;
}
.btn {
  position: fixed;
  width: 90%;
  left: 5%;
  height: 40px;
  color: white;
  bottom: 4em;
  background-color: red;
  border: none;
  border-radius: 999px;
}
</style>